<script setup>
import LaCarte from "@/components/LaCarte.vue";
import Comments from "@/components/Comments.vue";
import { ref, watch, onBeforeMount  } from "vue";
import { useRoute, useRouter } from "vue-router";
import requestUtil,{getServerUrl} from "@/utils/request.js";
import { ElMessage } from "element-plus";
import Cookies from "js-cookie";
let router = useRouter();
let route = useRoute();
let active = ref(0);
let storeId = route.query.id;
let star = ref();
let foodList = ref([]);
let store = ref([]);
let goodList = ref([]);
onBeforeMount (async () => {
  let res1 = await requestUtil.get("/app/showStarStore/", {
    storeId: storeId,
    userId: Cookies.get("userId")
  });
  star.value = res1.data.star;
  let res2 = await requestUtil.get("/app/showDishes/", { storeId: storeId });
  foodList.value = res2.data.data;
  let res3 = await requestUtil.get("/app/showStore/", { storeId: storeId });
  store.value = res3.data.data;
  await loadGoodList();
  await getImage()
});
const getImage =  () => {
  return getServerUrl()+'media/store/';
}
const loadGoodList = async () => {
  let res = await requestUtil.get("/app/shopCar/", { userId: Cookies.get("userId") });
  goodList.value = res.data.data;
}
const changeStar = async () => {
  let res = await requestUtil.put("/app/showStarStore/", {
    star: star.value,
    storeId: storeId,
    userId: Cookies.get("userId")
  });
  if (res.data.code === 200) {
    console.log(res.data.star);
    ElMessage.success(res.data.info);
    star.value = res.data.star;
  }
};
const onClickLeft = () => {
  router.back();
};
const onClickButton = () => {
  if (goodList.value.length === 0) {
    ElMessage.warning("请先添加商品");
    return;
  }
  router.push("/shopcar");
};
</script>

<template>
  <div class="storedetails">
    <div class="header">
      <van-nav-bar :title="store.name" left-text="返回" left-arrow @click-left="onClickLeft" />
      <div class="star" @click="changeStar">
        <van-rate v-model="star" :count="1" color="#FFBA20" readonly allow-half></van-rate>
      </div>
    </div>
    <div class="part1">
      <div class="left">
        <img :src="getImage()+store.img" />
      </div>
      <div class="right">
        <div class="title">{{store.name}}</div>
        <div class="notice">公告：麻辣小龙虾欢迎您的光临，用餐请您 错过高峰期</div>
      </div>
    </div>
    <div class="part2">
      <van-tabs v-model:active="active">
        <div class="order">
          <van-tab title="点菜">
            <LaCarte :menu="foodList" :storeId="route.query.id" @refreshOrders="loadGoodList"></LaCarte>
            <!--            <button @click="router.push('/shopcar')">完成</button>-->
            <van-action-bar style="border: 1px solid #e6e6e6; background-color:#f1f1f1;">
              <!--              <van-action-bar-icon icon="chat-o" text="客服" @click="onClickIcon"/>-->
              <van-badge :content="goodList.length">
                <van-action-bar-icon
                  style="margin-left: 20px;"
                  icon="cart-o"
                  text="购物车"
                  @click="router.push('/shopcar')"
                />
              </van-badge>
              <van-action-bar-button type="danger" text="去结算" @click="onClickButton" />
            </van-action-bar>
          </van-tab>
        </div>
        <div class="comments">
          <van-tab title="评论">
            <!-- <button @click="router.push('/publishupdates')">评论</button> -->
            <Comments></Comments>
          </van-tab>
        </div>
        <div class="business">
          <van-tab title="商家">
            <div class="address">
              <p>北京 朝阳区 四环到五环之间</p>
              <p>距你{{store.distance}}km</p>
            </div>
            <div class="img">
              <img :src="getImage()+store.img" />
              <img :src="getImage()+store.img" />
              <img :src="getImage()+store.img" />
            </div>
            <div class="storenotice">
              <div class="box1">店铺公告</div>
              <div class="box2">公告：麻辣小龙虾欢迎您的光临，用餐请您错过高峰期..小店的经营理念是“服务无止境，口碑永流传”，新品陆续上架中</div>
            </div>
            <div class="time">
              <span class="span1">营业时间</span>
              <span class="span2">9:00-18:00</span>
            </div>
          </van-tab>
        </div>
      </van-tabs>
    </div>
  </div>
</template>

<style scoped>
.storedetails {
  padding-bottom: 100px;
}

.header {
  border-bottom: 0.5px solid #ececec;
}

.header .back {
  display: inline-block;
  font-size: 50px;
  padding: 15px 20px;
}

.header .star {
  position: absolute;
  right: 50px;
}

.part1 {
  margin-top: 40px;
  display: flex;
}

.part1 .left img {
  margin-left: 30px;
  width: 200px;
}

.part1 .right {
  margin-left: 20px;
  padding-right: 30px;
}

.part1 .right .title {
  font-weight: 400;
  font-size: 32px;
  color: #333333;
}

.part1 .right .notice {
  font-weight: 400;
  font-size: 26px;
  color: #999999;
}

.part2 .business {
  width: 94%;
  margin-left: 3%;
  margin-top: 20px;
}

.part2 .order button {
  background-color: #ffba20;
  border-radius: 20px;
  width: 200px;
  position: absolute;
  right: 20px;
  padding: 10px 0;
  border: none;
}

.part2 .business .address {
  border-bottom: 0.5px solid #ececec;
  font-weight: 400;
  font-size: 24px;
  color: #333333;
  padding-bottom: 30px;
}

.part2 .business .img {
  padding: 30px 0;
}

.part2 .business .img img {
  width: 33.333%;
}

.part2 .business .storenotice {
  display: flex;
  margin-top: 15px;
  border-bottom: 0.5px solid #ececec;
  padding-bottom: 40px;
}

.part2 .business .storenotice .box1 {
  width: 25%;
}

.part2 .business .storenotice .box2 {
  width: 75%;
  font-weight: 400;
  font-size: 26px;
  color: #999999;
  padding-right: 40px;
}

.part2 .business .time {
  padding: 35px 0;
  border-bottom: 0.5px solid #ececec;
}

.part2 .business .time .span1 {
  font-weight: 400;
  font-size: 28px;
  color: #353535;
}

.part2 .business .time .span2 {
  position: absolute;
  right: 60px;
  font-weight: 400;
  font-size: 24px;
  color: #999999;
}
</style>